```jsx
import * as navigationMenu from "@zag-js/navigation-menu"
import { useMachine, normalizeProps } from "@zag-js/solid"
import { createMemo, createUniqueId } from "solid-js"

export function NavigationMenu() {
  const service = useMachine(navigationMenu.machine, { id: createUniqueId() })
  const api = createMemo(() => navigationMenu.connect(service, normalizeProps))

  return (
    <nav {...api().getRootProps()}>
      <div {...api().getIndicatorTrackProps()}>
        <ul {...api().getListProps()}>
          {/* Item with trigger */}
          <li {...api().getItemProps({ value: "products" })}>
            <button {...api().getTriggerProps({ value: "products" })}>
              Products
            </button>
            {/* Focus management proxies */}
            <span {...api().getTriggerProxyProps({ value: "products" })} />
            <span {...api().getViewportProxyProps({ value: "products" })} />
          </li>

          {/* Simple link */}
          <li {...api().getItemProps({ value: "pricing" })}>
            <a {...api().getLinkProps({ value: "pricing" })} href="/pricing">
              Pricing
            </a>
          </li>

          {/* Indicator */}
          <div {...api().getIndicatorProps()}>
            <div {...api().getArrowProps()} />
          </div>
        </ul>
      </div>

      {/* Shared viewport for all content */}
      <div {...api().getViewportPositionerProps()}>
        <div {...api().getViewportProps()}>
          {/* Content for products */}
          <div {...api().getContentProps({ value: "products" })}>
            <a {...api().getLinkProps({ value: "products" })} href="/analytics">
              Analytics
            </a>
            <a {...api().getLinkProps({ value: "products" })} href="/marketing">
              Marketing
            </a>
          </div>
        </div>
      </div>
    </nav>
  )
}
```
